<template>
    <span class="card" :class="card.option.color" @touchstart="selectCard" @mousedown="selectCard">
        <i class="icon fa fa-fw" :class="card.option.icon" />
        <span class="number">{{card.option.value}}</span>
    </span>
</template>
<script>
    export default {
        props: {
            card: Object,
        },
        methods: {
            selectCard() {
                this.$emit('select');
            }
        }
    }
</script>
<style lang="less" scoped>
    .card {
        &.black {
            color: black;
        }
        &.red {
            color: red;
        }
        .icon {
            font-size: 0.777777rem;
        }
    }
</style>